<template>
<div class="timeline-block-root">
  <div class="bar">
    <FullBtn class="btn"
      :zoomin="zoomin" 
      @zoomin="$emit('zoomin')"
      @zoomout="$emit('zoomout')">
    </FullBtn>
  </div>
  <div class="outer" :class="{zoomin}">
    <div class="wrapper"
      @mousedown="mdown" @mouseup="mup"
      @mousemove="mmove" @mouseleave="mup"
      @mousewheel="mwheel"
      ref="wrap"
      :style="{cursor: cusr}">
      <div class="backtiles">
        <div class="item" v-for="year in yeararr" :style="{width: tileW + 'px'}">
          <div class="label">{{year}}</div>
        </div>
      </div>
      <div class="lines">
        <div class="item" v-for="(item, i) in data.events">
          <div class="range" :style="getRangeStyle(item.range, i)"></div>
          <div class="text">{{getRangeText(item.range)}}&nbsp;&nbsp;{{item.desc}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import FullBtn from '../common/FullBtn.vue'
export default {
  name: 'timeline-block',
  components: {FullBtn},
  props: ['zoomin'],
  data(){
    return {
      data: {
        range: [1995, 2016],
        events: [{
          range: [2005, [2005, 9]],
          desc: '中共中央加强海洋维权的战略部署'
        },{
          range: [[2006, 6], [2007, 9]],
          desc: '美军侦察机飞近永暑礁'
        },{
          range: 2009,
          desc: '菲律宾抗议'
        },{
          range: [[2005, 10], 2009],
          desc: '美军太平洋军演'
        },{
          range: [[2013, 12], [2015, 9]],
          desc: '......'
        },{
          range: [[2013, 1], [2015, 2]],
          desc: '......'
        },{
          range: [[2005, 1], [2014, 3]],
          desc: '......'
        }]
      },
      mdownF: false,
      tileW: 45,
      color: [],
      cusr: 'grab'
    }
  },
  mounted(){
    let ev = this.data.events.slice(0)
    for(let i = 0; i < 5; i++){
      this.data.events = this.data.events.concat(ev)
    }
  },
  computed: {
    yeararr(){
      let out = []
      let len = this.data.range[1] - this.data.range[0] + 1
      for(let i = 0; i < len; i++){
        out.push(this.data.range[0] + i)
      }
      return out
    }
  },
  methods: {
    getRangeText(range){
      let outstr = ''
      if(typeof range == 'number'){
        outstr += range
      }else{
        for (let i = 0; i < 2; i++){
          let num = range[i]
          if(typeof num == 'number'){
            outstr += num
          }else{
            outstr += num[1] + '/' + num[0]
          }
          if (i == 0) outstr += '-'
        }
      }
      return outstr
    },
    getRangeStyle(range, i){
      let ml = 12
      let w = 12
      let sRange = []
      let startYear = this.data.range[0]
      if(typeof range == 'number'){
        sRange = [[range, 1], [range, 12]]
      }else{
        for (let i = 0; i < 2; i++){
          let num = range[i]
          if(typeof num == 'number'){
            sRange.push([num, i ? 12 : 1])
          }else{
            sRange.push(num)
          }
        }
      }
      ml = (sRange[0][0] -  startYear) * 12 + sRange[0][1] - 1
      w = (sRange[1][0] - sRange[0][0]) * 12 + 
           sRange[1][1] - sRange[0][1] + 1
      let color = this.getColor(i)
      return {
        marginLeft: ml * this.tileW / 12 + 'px',
        width: w * this.tileW / 12 + 'px',
        backgroundColor: color,
        boxShadow: '0 0 5px ' + color
      }
    },
    getColor(i){
      if(!this.color[i]){
        this.color[i] = 'hsl(' + Math.round(Math.random() * 360) + ',91%,59%)'
      }
      return this.color[i]
    },
    mwheel(e){
      let delta = -e.deltaY / 50
      if(this.tileW <= 36 && delta < 0) return
      if(this.tileW >= 200 && delta > 0) return
      let oldTileW = this.tileW
      this.tileW += delta
      let mouseToLeft = e.clientX - this.$refs.wrap.getBoundingClientRect().left
      let oldW = mouseToLeft + this.$refs.wrap.scrollLeft
      let newW = oldW / oldTileW * this.tileW
      this.$refs.wrap.scrollLeft = newW - mouseToLeft
    },
    mdown() {
      this.cusr = '-webkit-grabbing'
      this.mdownF = true
    },
    mmove(e){
      if(this.mdownF){
        this.$refs.wrap.scrollLeft -= e.movementX
      }
    },
    mup() {
      this.cusr = '-webkit-grab'
      this.mdownF = false
    }
  }
}
</script>

<style scoped lang="stylus">
.timeline-block-root
  >.bar
    padding 12px 28px 10px 0px
    display flex
    justify-content flex-end
  >.outer
    height calc(100% - 44px)
    box-sizing border-box
    &.zoomin
      padding 20px 120px

.wrapper
  cursor grab
  user-select none
  overflow hidden
  position relative
  height 100%
  >.backtiles
    display flex
    height 100%
    >.item
      flex none
      width 40px
      border 1px solid #4e4e52
      box-sizing border-box
      border-right-width 0
      border-left-style dashed
      display inline-block
      padding-top 2px
      >.label
        color #59b3ff
        font-size 12px
        text-align center
      &:last-child
        border-right-width 1px
        border-right-style dashed

.wrapper>.lines
  position absolute
  top 22px
  height 190px
  >.item
    line-height 28px
    white-space nowrap
    >.range
    >.text
      display inline-block
      margin-right .2em
    >.range
      height 5px
      width 40px
      background-color #e2f635
      border-radius 2.5px
      box-shadow 0 0 5px #e2f635
      vertical-align middle
    >.text
      font-size 12px
</style>